import './xnquery.js';
import './xnnumberturner.css';
let $ = window.XNQuery;
let defaultOption={
    type: 'linerUp',//
    // linerUp：匀速向上翻转，sameTimeUp：总时间相同向上翻转，linerChange:匀速数字变化，sameTimeChange:总时长相同数字变化,easyChange
    css: {
        height: 40,
        backgroundColor: '#efefef',
        borderColor: '#125ce9',
        borderWidth: 2,
        borderStyle: 'solid',
        fontWeight:'bold',
        backgroundImage: '',
        backgroundSize: 'auto',
        width: 30,
        textAlign: 'center',
        marginRight: 14,
        borderRadius: 4,
        fontSize: 22,
        fontFamily: '苹方,微软雅黑',//unidreamLED
        color: 'rgb(11 59 235)'
    },
    animate: {
        speedTimeLength: 2,
        sleepTime: 10,
        totalTime: 1000,//总时长
    }

}
class XnNumberTurner{
    constructor(container,data,option){
        this.container=container;
        this.data=data;
        this.option = $.extend(true, {}, defaultOption, option);
        this.domTemp=`
<div class="xnnumber-item">
            <div class="xnnumber-inner">
                <div>0</div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>0</div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
            </div>
        </div>`
        this.notnumdomTemp=`<div class="xnnumber-item">
            <div class="xnnumber-inner">
                
            </div>
        </div>`
        this.init();
    }

    init(){
        $(this.container).empty();
        this.container.classList.add('xnnumberturner-cont')
        this.container.style.gridGap=this.option.css.marginRight+'px'
        this.container.style.gridTemplateColumns='repeat(auto-fill,'+this.option.css.width+'px)'
        this.arry=String(this.data).split('')
        this.oldarry=[];
        this.initDom();
        setTimeout(()=>{this.refreshNumber();},500)
    }

    initDom(){
        for(let i=0;i<this.arry.length;i++){
            if(this.isNumber(this.arry[i])){
                let $dom = $.parseToDOM(this.domTemp)[0]
                $dom.setAttribute('data-index',i);
                $(this.container).append($dom)
                this.oldarry.push('0')
            }
            else{
                let $dom = $.parseToDOM(this.notnumdomTemp)[0]
                $dom.setAttribute('data-index',i);
                $dom.classList.add('not-number')
                $dom.querySelector('.xnnumber-inner').innerHTML=this.arry[i];
                $(this.container).append($dom)
                this.oldarry.push(this.arry[i])
            }
        }
        this.setItemCss();
    }

    setItemCss() {
        this.container.querySelectorAll('.xnnumber-item').forEach((ele) => {
            ele.querySelector('.xnnumber-inner').style.lineHeight=this.option.css.height+'px'
            $.setCss(ele, this.option)
        })
    }

    refreshNumber(){
        let n=this.arry;
        for(let i=0;i<n.length;i++){
            let num=n[i];
            let oldnum=this.oldarry[i]
            if(this.isNumber(num)){
                let offset=-(Number(num)-0)*this.option.css.height;
                if(num==oldnum){
                    let oldoffset=this.getTranslate(this.container.querySelector('[data-index="'+i+'"] .xnnumber-inner'));
                    if(oldoffset<=-10*this.option.css.height){
                    }
                    else{
                        offset+=-10*this.option.css.height;
                    }
                }
                this.container.querySelector('[data-index="'+i+'"] .xnnumber-inner').style.transform='translateY('+offset+'px)'
            }
        }
    }

    getTranslate(dom){
        var translates=document.defaultView.getComputedStyle(dom,null).transform;
        translates=translates.substring(7).split(',')[5];
        return parseFloat(translates)
    }

    changeNumber(number){
        this.data=number;
        this.oldarry=$.extend(true,[],this.arry);
        this.arry=String(number).split('')
        let reload=false;
        if(this.oldarry.length!=this.arry.length){
            reload=true;
        }
        for(let i=0;i<this.arry.length;i++){
            let a=this.arry[i];
            let b=this.oldarry[i];
            if(!this.isNumber(a) && a!=b){
                reload=true;
                break;
            }
        }
        if(reload){
            this.init();
        }
        else{
            this.refreshNumber();
        }
    }

    isNumber(val){
        var regPos = /^\d+$/; // 非负整数
        return regPos.test(val);
    }



}
window.XnNumberTurner=XnNumberTurner;
export default XnNumberTurner;
